<template>
    <div>
        <el-row>
            <el-col :span="6">
                <el-input v-model="pid" style="width:100px"/>
                <el-button @click="eventSelectTree">查询树</el-button>
                <el-tree :data="proviteData" :default-expand-all="true" :props="defaultProps"
                    @node-click="handleNodeClick"></el-tree>
            </el-col>
            <el-col :span="18" style="text-align:left;">
                选择的城市：{{ proviteName }} <el-input v-model="name" style="width:300px" />
                <span class="code" @click="eventChangeCode">{{ code }}</span>

                <!--富文本框 quill-->
                <div>
                    <quillEditor v-model="content" />
                </div>
                <div>
                    <el-button @click="eventSubmit">提交</el-button>
                </div>
                <div>
                    <h3>用来显示富文本框的内容</h3>
                    <div v-html="newContent"></div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
    components: {
        quillEditor
    },
    data() {
        return {
            name: '',
            content: '',
            newContent: '',
            proviteData: [],
            pid:0,
            proviteName:'',
            defaultProps: {
                children: 'items',
                label: 'name'
            },
            code: '', //这是验证码
        }
    },
    mounted() {
        this.onloadProviteData()
        this.onloadCode()
    },
    methods: {
        eventSubmit() {
            if (this.code != this.name) {
                this.$message.error('验证码输入错误')
                this.onloadCode()
                this.name = ''
                return
            }

            this.newContent = this.content
            //console.log(this.content);
        },
        //点击验证码，进行改变
        eventChangeCode() {
            this.onloadCode()
        },
        //加载验证码
        onloadCode() {
            let url = this.$baseUrl + '/weath/code'
            this.$http.get(url, {
                params: {
                    n: 5,
                    t: 'adfa'
                }
            }).then(res => {
                if (res.data.code == 200) {
                    this.code = res.data.data
                }
            })
        },
        //加载省份树数据
        onloadProviteData() {
            let url = 'http://localhost:5073/weath/recursion'
            this.$http.get(url, {
                params: {
                    n: this.pid
                }
            }).then(res => {
                if (res.data.code == 200) {
                    this.proviteData = res.data.data
                }
            })
        },
        //查询树按钮事件
        eventSelectTree(){
            this.onloadProviteData()
        },
        handleNodeClick(data) {
            console.log(data);
            this.proviteName = data.name
        }
    }
}
</script>

<style scoped>
.code {
    border: 1px solid;
    padding: 8px 15px;
    border-radius: 5px;
    background: #dcdc;
    cursor: pointer;
    margin: 0 20px;
    letter-spacing: 3px;
}
</style>